<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { usePageScroll } from "@/hooks/scroll";
import { useList } from "@/hooks/page";
import { guider_study_index_api } from "@/api/guider_home";
import { select_course_header_api } from "@/api/new_guide";
import { course_api } from "@/api/tour";
import { AppData } from "@/utils/app";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";

import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";
import PageSticky from "@/components/page/sticky.vue";
import StudyTypeItem from "./components/study-type-item.vue";
import StudyCourseItem from "./components/study-course-item.vue";
import ListMore from "@/components/list/more.vue";
import PopupModal from "@/components/popup/modal.vue";

onLoad((options) => {
  useQuery(options as MiniApp.AppLaunchOption, () => {
    reloadData();

    select_course_header_api().then((resp) => (typeList.value = resp.items));
    reloadList();

    AppData.initConfig((config) => {
      shareOption.title = config.share_info.title;
    });
  });
});
onShow(() => {
  myData.isCertificate = AppData.userData.is_guide_certification === 1;
});
onPullDownRefresh(() => {
  reloadData()
    .then(() => uni.stopPullDownRefresh())
    .catch(() => uni.stopPullDownRefresh());

  select_course_header_api().then((resp) => (typeList.value = resp.items));
  reloadList();
});
const { pageIsScroll, onPageScroll } = usePageScroll(() => {
  listLoadMore.value = listData.value.length > 1;
});
onReachBottom(() => loadMoreList());

const reloadData = () => {
  return guider_study_index_api().then((resp) => {
    adList.value = resp.banner;
    menuList.value = resp.icon;
    examList.value = resp.exam_zone;
  });
};

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const ad = adList.value[adIndex.value];
  ad.url.startsWith("http")
    ? Router.navigateToWeb(ad.url, "1")
    : Router.navigateTo(ad.url);
};

const menuList = ref<any[]>([]);
const menuClick = (index: number) => {
  checkCertificate((isLogin) => {
    Router.navigateToOrRedirectTo(isLogin, menuList.value[index].link);
  });
};

const examList = ref<any[]>([]);
const examClick = (index: number) => {
  checkCertificate((isLogin) => {
    Router.navigateToOrRedirectTo(isLogin, examList.value[index].url);
  });
};

const queryData = reactive({ course_type: 0 });

const typeList = ref<any[]>([]);
const typeClick = (id: number) => {
  queryData.course_type = id;
  reloadList();
};

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 20 }, (query) => {
    return course_api({ ...query, ...toRaw(queryData) });
  });

const courseClick = (index: number) => {
  checkCertificate((isLogin) => {
    Router.navigateToOrRedirectTo(
      isLogin,
      `/package/study/pages/course/detail?id=${listData.value[index].id}`
    );
  });
};

const checkCertificate = (callback: (isLogin: boolean) => void) => {
  Account.checkLogin((isLogin) => {
    // 已认证
    if (AppData.userData.is_guide_certification === 1) return callback(isLogin);

    isLogin && Router.navigateBack();
    popupModal.value?.show(
      {
        content:
          "你好！这里是全球导游人的家园，为了能给你提供针对性的专业内容服务，需要对你身份进行基础认证，敬请理解！",
        confirmText: "开始认证",
        translateY: "-55%",
      },
      () => {
        Router.navigateTo(
          AppData.userData.status === -1
            ? "/package/guider/pages/apply/type"
            : "/package/guider/pages/apply/detail"
        );
      }
    );
  });
};

const myData = reactive({ isCertificate: false });

const popupModal = ref<InstanceType<typeof PopupModal>>();

const { onShareAppMessage, onShareTimeline, shareOption } =
  useShare("/pages/index/study");
</script>

<template>
  <NavBar title="考证专区" />
  <NavBg :retract="pageIsScroll" url="/static/index-bg.png" />
  <NavSpace />

  <view class="study-ad">
    <view class="study-ad-bg"></view>
    <view class="study-ad-swipe" @click="adClick">
      <Swipe v-model="adIndex" :listData="adList" labelKey="img_url" autoplay />
    </view>
    <view class="study-ad-dot">
      <SwipeDot v-model="adIndex" :total="adList.length" />
    </view>
  </view>

  <view class="study-menu">
    <view
      class="study-menu-item"
      v-for="(i, d) of menuList"
      :key="i.id"
      @click="menuClick(d)"
    >
      <image class="study-menu-icon" :src="i.icon" />
      <view class="study-menu-name">{{ i.title }}</view>
    </view>
  </view>

  <view class="study-exam">
    <image
      class="study-exam-item"
      v-for="(i, d) of examList"
      :key="d"
      @click="examClick(d)"
      :src="i.pic_url"
    />
  </view>

  <PageSticky customNav background="#f9f9f9">
    <scroll-view class="study-type" scroll-x enhanced :show-scrollbar="false">
      <view class="study-type-space"></view>
      <view
        class="study-type-item"
        v-for="i of typeList"
        :key="i.id"
        @click="typeClick(i.id)"
      >
        <StudyTypeItem
          :isActive="queryData.course_type === i.id"
          :text="i.name"
        />
      </view>
    </scroll-view>
  </PageSticky>

  <view class="study-data">
    <view class="study-data-wrapper">
      <view
        class="study-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="courseClick(d)"
      >
        <StudyCourseItem :info="i" :isCertificate="myData.isCertificate" />
      </view>
    </view>

    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>

  <PopupModal ref="popupModal" />
</template>

<style lang="scss">
page {
  padding-top: 20rpx;
  padding-bottom: 0;
}

.study-ad {
  position: relative;
  margin: 0 40rpx 52rpx;

  .study-ad-bg {
    position: absolute;
    left: 20rpx;
    top: 18rpx;
    right: 20rpx;
    height: 244rpx;
    border-radius: 20rpx;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20rpx);
  }

  .study-ad-swipe {
    position: relative;
    height: 250rpx;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .study-ad-dot {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
  }
}

.study-menu {
  display: flex;
  margin: 0 30rpx 40rpx;
  border-radius: 20rpx;
  background-color: #ffffff;

  .study-menu-item {
    width: 25%;
    padding: 40rpx 0;
  }

  .study-menu-icon {
    display: block;
    width: 88rpx;
    height: 88rpx;
    margin: 0 auto 10rpx;
  }

  .study-menu-name {
    font-size: 24rpx;
    color: #333333;
    line-height: 34rpx;
    text-align: center;
  }
}

.study-exam {
  display: flex;
  padding-left: 30rpx;
  margin-bottom: 30rpx;

  .study-exam-item {
    width: 162rpx;
    height: 220rpx;
    margin-right: 14rpx;
  }
}

.study-type {
  height: 90rpx;
  white-space: nowrap;

  .study-type-space,
  .study-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .study-type-space {
    width: 30rpx;
  }

  .study-type-item {
    margin-top: 20rpx;
    margin-right: 40rpx;
  }
}

.study-data {
  .study-data-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-top: 30rpx;
  }

  .study-data-item {
    width: 336rpx;
    margin-right: 18rpx;
    margin-bottom: 20rpx;
  }
}
</style>
